<template>
  <view class="member-container">
    <up-navbar
      title="我的"
      :auto-back="false"
      safeAreaInsetTop
      fixed
      bgColor="transparent"
      left-icon=""
      :titleStyle="{ color: '#fff' }"
    ></up-navbar>
    <!-- 用户信息区域 -->
    <view class="user-info" @click="toEditProfile">
      <view style="display: flex; align-items: center">
        <u-avatar :src="userStore.userInfo?.avatar_url" size="60"></u-avatar>
        <view class="info-right">
          <text class="username">{{ userStore.userInfo?.nickname }}</text>
          <text class="phone">{{ userStore.userInfo?.phone }}</text>
        </view>
      </view>
    </view>

    <view class="information">
      <view
        class="item"
        v-for="(item, index) in informationList"
        :key="index"
        @click="handleNavigator(item)"
      >
        <u-icon :name="item.icon" size="48px"></u-icon>
        <text class="title">{{ item.title }}</text>
      </view>
    </view>

    <!-- 功能入口 -->
    <view class="function-list">
      <u-cell-group>
        <u-cell
          v-for="(item, index) in functionList"
          :key="index"
          :title="item.title"
          :icon="item.icon"
          isLink
          @click="handleFunctionTap(item)"
        ></u-cell>
      </u-cell-group>
    </view>

    <!-- 底部操作按钮 -->
    <!-- <view class="footer">
      <up-button shape="circle" type="error" @click="handleLogout"
        >退出登录</up-button
      >
    </view> -->
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useUserStore } from "@/store/modules/user";

const userStore = useUserStore();

export type InformationType = {
  title: string;
  icon: string;
  pagePath: string;
  navigateType: "switchTab" | "navigateTo";
};

export type FunctionType = {
  title: string;
  icon: string;
  pagePath: string;
};

const userInfo = ref({
  avatar: "/static/avatar.png",
  name: "张三",
  isVip: true,
  phone: "138****8888",
});

const informationList = ref<InformationType[]>([
  {
    title: "我的订单",
    icon: "/static/images/member-order.png",
    pagePath: "/pages/index/order",
    navigateType: "switchTab",
  },
  {
    title: "申请人资料",
    icon: "/static/images/member-info.png",
    pagePath: "/pages/user/applicant/list",
    navigateType: "navigateTo",
  },
  {
    title: "地址管理",
    icon: "/static/images/member-address.png",
    pagePath: "/pages/user/address/list",
    navigateType: "navigateTo",
  },
]);

const functionList = ref<FunctionType[]>([
  { title: "客服咨询", icon: "server-man", pagePath: "" },
  { title: "意见反馈", icon: "chat", pagePath: "/pages/user/feedback" },
  { title: "关于我们", icon: "info", pagePath: "" },
  { title: "设置", icon: "setting", pagePath: "/pages/user/setting" },
]);

function handleNavigator(e: InformationType) {
  switch (e.navigateType) {
    case "switchTab":
      uni.switchTab({
        url: e.pagePath,
      });
      break;
    case "navigateTo":
      uni.navigateTo({
        url: e.pagePath,
      });
      break;
  }
}

function handleFunctionTap(e: FunctionType) {
  uni.navigateTo({
    url: e.pagePath,
  });
}

function toEditProfile() {
  uni.navigateTo({
    url: "/pages/user/edit-profile",
  });
}

function handleLogout() {
  uni.reLaunch({
    url: "/pages/user/login",
  });
}
</script>

<style lang="scss" scoped>
page {
  background-color: #f5f5f5;
}
.member-container {
  .user-info {
    display: flex;
    align-items: flex-end;
    padding: 30rpx;
    padding-top: calc(
      30rpx + constant(safe-area-inset-top)
    ); /* 兼容iOS 11.0-11.2 */
    padding-top: calc(30rpx + env(safe-area-inset-top)); /* 兼容iOS 11.2+ */
    background-color: #fff;
    margin-bottom: 20rpx;
    background-image: url("@/static/images/member-bg.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 300rpx;
    color: #fff;

    .info-right {
      margin-left: 30rpx;
      display: flex;
      flex-direction: column;
      align-items: center;

      .username {
        font-size: 36rpx;
        font-weight: bold;
      }

      .vip {
        color: #f0ad4e;
        font-size: 24rpx;
        margin: 10rpx 0;
      }

      .phone {
        color: #999;
        font-size: 28rpx;
      }
    }
  }

  .information {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 20rpx;
    background-color: #fff;
    border-radius: 10rpx;
    margin: 20rpx;

    .item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
  }

  .function-list {
    margin: 20rpx;
    background-color: #fff;
    border-radius: 10rpx;

    u-cell {
      padding: 20rpx;
      border-bottom: 1px solid #eee;
    }
  }

  .footer {
    margin-top: 40rpx;
    padding: 0 30rpx;
  }
}
</style>
